<template>
  <!-- 客户案例 case-->
  <div class="case">
    <div class="case_warp">
      <div class="case_warp_top">
        <div class="case_warp_conten_img">
          <img
            src="@/assets/Homepage_desktop/client_case_hand_shake_img.png"
            alt=""
          />
        </div>
        <div class="case_warp_conten_li">客户案例</div>
      </div>
      <div class="case_base">
        <div class="case_item">
          <!-- 头像 -->
          <div class="case_conten_img">
            <img
              src="@/assets/Product_page_whatsapp_desktop/user_comment_image1.png"
              alt=""
            />
          </div>
          <!-- 内容部份 -->
          <div class="case_conten_item">
            <h4>虚拟产品卖家</h4>
            <div class="case_conten_item_bot">
              我们做虚拟产品的要做常规推广限制很多，51出海团队为我们提供了WhatsApp群发技术，让我们可以稳定地找到客户源
            </div>
          </div>
        </div>
        <div class="case_item">
          <!-- 头像 -->
          <div class="case_conten_img">
            <img
              src="@/assets/Product_page_whatsapp_desktop/user_comment_image2.png"
              alt=""
            />
          </div>
          <!-- 内容部份 -->
          <div class="case_conten_item">
            <h4>独立站站长</h4>
            <div class="case_conten_item_bot">
              一直想找到个低成本又有效的推广方法。与51出海合作把WhatsAPP私域做起来后，我们做持续的复购，把成本摊得比纯投推广更低，效果显著。
            </div>
          </div>
        </div>
        <div class="case_item">
          <!-- 头像 -->
          <div class="case_conten_img">
            <img
              src="@/assets/Product_page_whatsapp_desktop/user_comment_image3.png"
              alt=""
            />
          </div>
          <!-- 内容部份 -->
          <div class="case_conten_item">
            <h4>亚马逊服装店长</h4>
            <div class="case_conten_item_bot">
              我们通过51出海的Facebook拓实做站外推广，逐渐积攒下了一大批FB和WS的私域粉丝。多亏了这个操作，我们抵抗住了封店潮的风险。
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "caseview",
};
</script>

<style scoped>
.case {
  padding-bottom: 50px;
  background: #f8f8f8;
}
.case_warp {
  max-width: 1160px;
  margin: 0 auto;
}

.case_base {
  display: flex;
  justify-content: space-around;
}

.case_item {
  height: 295px;
  width: 250px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 20px #eee;
  padding: 25px;
}

.case_conten_img {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 25px;
}

.case_conten_img > img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}

.case_conten_item > h4 {
  font-size: 16px;
  color: #1d2845;
  margin: 25px 0;
}

.case_conten_item_bot {
  color: #838d9e;
}

.case_warp_top {
  display: flex;
  align-content: center;
  justify-content: space-around;
  padding: 40px 200px;
}

.case_warp_conten_img {
  height: 162px;
}

.case_warp_conten_img > img,
.case_warp_conten_li {
  width: 300px;
}

.case_warp_conten_li {
  height: 162px;
  line-height: 162px;
  color: #1d2845;
  font-size: 30px;
  font-weight: bold;
}
</style>
